\subsection{Storyboards}
In this section we will design how the application must communicate with the user, we must also take into account all the 
requirements that have to be met by the application and we will try to design the interface as intuitive and easy to learn as 
possible, since the users of our system are not required to have a great knowledge of computers or mobile phones.

\subsubsection{Login}
\label{loginAndroid}
The first use case our application has to satisfy is the Login system. In order a user to log in the system, he should be asked 
for his nick and password. Since our application has to provide a method of registration for new users, we found correct to 
create a button so as to provide access to the register use case. We should keep in mind that the password cannot be shown, 
asterisks will appear in its place.

As you can see in \emph{Figure \ref{loginStoryboard}} if the user clicks the \emph{Login} button, it will start the screen 
represented by \emph{Figure \ref{friendsStoryboard}}. Otherwise if the user clicks the \emph{Register} button, it will start 
the screen represented by \emph{Figure \ref{registerStoryboard}}.

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/loginStoryboard.png} 
\caption{Login Storyboard.}
\label{loginStoryboard}
\end{figure}

\subsubsection{Register a user}

The \emph{Figure \ref{registerStoryboard}} represents the \emph{Register a user} user case. On this screen the user must fill the
required fields in order to be registered in the system. If the user clicks the \emph{Save} button the system will store the new
user's account indicating that the account was created successfully, if the required fields are correct, otherwise it will display 
a message indicating the failure. If the user presses the \emph{Cancel} button, it will appear the screen \emph{Figure 
\ref{loginStoryboard}}, which will appear also after the creation of the new user's account.

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/registerStoryboard.png} 
\caption{Register Storyboard}
\label{registerStoryboard}
\end{figure}

\subsubsection{See Friends}
This is the application's main screen (\emph{Figure \ref{friendsStoryboard}}). It is decided to represent the user's friends 
on a map because it is the best way to represent positions. In order to access to a friend's notes, the user has to click in 
the friend's icon where starts the Storyboard \emph{See friend's notes} (\emph{Section \ref{seeFriendsNotes}}). This 
complicates the implementation because it is not easy to click on the screen and recognise when a user has been selected but 
it was decided to be done this way because it's very intuitive.Otherwise the application would be or hard to. When the user 
clicks in a friend the screen in \emph{Figure \ref{notesStoryboard}} will be displayed.

It is also decided to put a menu on the screen also to facilitate access to different sections of the program.
The buttons which appear in the menu are:
\begin{enumerate}
 \item Find a friend: This button provides access to \emph{Search friends} (\emph{Section \ref{seeFriendsNotes}}).
 \item New comment: This button starts the \emph{Section \ref{createCommentandroiddesign}}.
 \item Friend requests: This button displays the \emph{Section \ref{friendRequests}}.
 \item Modify: This button provides access to \emph{Modify personal data} (\emph{Section \ref{seeFriendsNotes}}).
 \item Photo: When the user clicks this button starts the \emph{Take a photo} use case (\emph{Section \ref{takePhoto}}).
 \item Logout: The users returns to the login screen (\emph{Section \ref{loginAndroid}}).
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/usersStoryboard.png} 
\caption{Friends Storyboard}
\label{friendsStoryboard}
\end{figure}

\subsubsection{See friend's notes}
\label{seeFriendsNotes}
This screen (\emph{figure \ref{notesStoryboard}}) is very similar to \emph{See friends} \emph{Figure \ref{friendsStoryboard}}. 
But in this case, in the screen a user's notes are displayed distributed on a map. A problem occurred when lot of notes were close,  
the note was impossible to see, so it was decided to merge the notes that are close into groups, depending on the zoom the map.
Thus, if the user selects a small zoom, it might be possible that all the notes of Denmark of his friend appears in a single 
group, but if the user extends the zoom in Denmark the group will break into more notes or groups.
So when the user selects a note or a group of notes it will display a photo gallery with the note or group of notes selected 
(\emph{section \ref{photoGallery}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/notesStoryboard.png} 
\caption{Friend's notes Storyboard}
\label{notesStoryboard}
\end{figure}

\subsubsection{Take a photo}
\label{takePhoto}
This screen (\emph{figure \ref{photoStoryboard}}) allows the user to take a photo and make a comment about it. This screen shows 
the image taken from the phone's camera, when the user clicks the button photo, which takes a photo. Also the user can add a 
comment to the photo. Once the photo is taken, the button "Photo" has to change to \emph{Try again} to allow the user to take 
another photo from the camera, if he wants. When the user presses the button \emph{Save} the photo will be saved. Then the system 
displays the previous screen. (\emph{Figure \ref{friendsStoryboard} or Figure \ref{notesStoryboard}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/takePhotoStoryboard.png} 
\caption{Take a photo Storyboard}
\label{photoStoryboard}
\end{figure}

\subsubsection{Notes gallery}
\label{photoGallery}
To show the notes we decided to create a gallery (\emph{Figure \ref{galleryStoryboard}}). All the note are loaded on the top 
of the screen. When the user selects a note on the menu, if the note contains a photo, the photo will be displayed underneath 
the comment, otherwise only the note will be displayed. If the user presses the button \emph{Back} in the mobile, he will return 
to the previous screen (\emph{Figure \ref{friendsStoryboard} or Figure \ref{notesStoryboard}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/photoGalleryStoryboard.png} 
\caption{Notes gallery Storyboard}
\label{galleryStoryboard}
\end{figure}

\subsubsection{Search friends}
\label{searchFriends}
This interface allows the user to search friends. The user can search a friend by name, surname, country or nick. We tried to 
make an intuitive interface so as to allow quick and easy search as shown in (\emph{Figure \ref{searchStoryboard}}). When the 
user presses the button \emph{Search} it starts the \emph{section \ref{friendRequests}}.

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/searchStoryboard.png} 
\caption{Search friends Storyboard}
\label{searchStoryboard}
\end{figure}

\subsubsection{Make and accept friend's requests}
\label{friendRequests}
This is a common interface to accept or reject friend requests and make new friend requests (\emph{Figure 
\ref{listFriendsStoryboard}}).  In the first case, the interface displays a list of users who made a friend request to the user. 
When he selects a user from the list and clicks the \emph{Update} button, the system will store the friend acceptance and will 
reject the unselected users. In the second case, the interface displays a list of search results. Then he can select all users 
he wants on the list and if he clicks the \emph{Update} button the system will create a friend request to the selected user.
Finally if the user press the \emph{Cancel} or \emph{Back}  button on the mobile, he returns to the previous screen 
(\emph{Figure \ref{friendsStoryboard}, Figure \ref{notesStoryboard} or  Figure \ref{searchStoryboard}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/listFriendsStoryboard.png} 
\caption{Accept friends Storyboard}
\label{listFriendsStoryboard}
\end{figure}

\subsubsection{Create a comment}
\label{createCommentandroiddesign}
This interface is used to create a comment (\emph{Figure \ref{commentsStoryboard}}). When the user clicks in \emph{Save} button, 
the comment is stored in the system. Finally if the user press the \emph{Cancel} or \emph{Back} button on the mobile, he 
returns to the previous screen (\emph{Figure \ref{friendsStoryboard} or Figure \ref{notesStoryboard}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/commentStoryboard.png} 
\caption{Create a comment Storyboard}
\label{commentsStoryboard}
\end{figure}

\subsubsection{Modify personal data}
\label{modifypersonaldatAndroiddesign}
The \emph{Figure \ref{modifyStoryboard}} represents the \emph{Modify personal data} user case. On this screen the user must 
fill the fields in order to modify his account. First of all, the fields must be filled with the current user's account. If he 
clicks the \emph{Save} button the system will check all fields and it will store the information inserted if all fields are 
correct and it will indicate that the update was successful, otherwise the system will display a message indicating the failure. 
If everything is correct or the user pressed the \emph{Cancel} button, it will appear the previous screen (\emph{Figure 
\ref{friendsStoryboard} or Figure \ref{notesStoryboard}}).

\begin{figure}[ht]
\centering
\includegraphics[width=0.4\textwidth]{Android/Design/images/registerStoryboard.png} 
\caption{Modify personal data Storyboard}
\label{modifyStoryboard}
\end{figure}